<template>
  <el-aside :width="isCollapseMenu ? '4rem':'10rem'">
    <el-scrollbar style="height: 100%">
      <img v-if="!isCollapseMenu" class="header-logo-1" src="@/assets/img/topLogo@3.png"/>
      <img v-else class="header-logo-2" src="@/assets/img/topLogo@3.png"/>
      <el-menu
          :collapse="isCollapseMenu"
          unique-opened
          background-color="#090723"
          :collapse-transition="false"
          text-color="rgba(255, 255, 255, .5)"
          active-text-color="white"
          :default-active="$route.path" router>
        <el-submenu :index="submenu.action+submenu.id" v-for="submenu in menu" :key="`submenu${submenu.id}`">
          <div class="title-slot" slot="title">
            <i :class="['iconfont',submenu.icon]"></i>
            <span slot="title">{{ submenu.name }}</span>
          </div>
          <el-menu-item :index="item.action" v-for="item in submenu.menuList" v-if="item.level !== 'BUTTON'"
                        :key="`menu-item${item.id}`">
            <div class="item-title">
              <span class="item-title-string">{{ item.name }}</span>
            </div>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<script>
import {mapState} from 'vuex'
import {flatMap} from "lodash";

let countInterval
export default {
  name: 'HomeMenu',
  data() {
    return {
      keyable: true,
      clickFlag: false,
      play: false,
    }
  },
  methods: {
    async handleCollapseMenu() {
      await this.$store.dispatch('_setMenuCollapse', !this.isCollapseMenu)
    }
  },
  computed: {
    ...mapState({
      isCollapseMenu: state => state.user.isCollapseMenu,
      menu: state => state.menu.menus,
      currentUser: state => state.user.current || {},
    }),
  },
  components: {
  }

}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/base";

.iconfont {
  font-size: 20px;
  margin-right: 3px;
}

/*audio#myAudio {
    display: block !important;
}*/
.el-aside {
  color: #333;
  background-color: $--color-dark !important;

  :global(.el-scrollbar__bar.is-vertical) {
    display: none;
  }

  .header-logo-1 {
    height: 100px;
    width: 100px;
    margin: 30px 30px 30px 40px;
  }

  .header-logo-2 {
    width: 3.4rem;
    margin-top: 20px;
    margin-left: 0.3rem;
    margin-bottom: 80px;
  }

  .iconLineHeight {
    line-height: 2.2rem;
  }

  .el-menu {
    border-right: none;
  }

  .el-menu--vertical {
    left: 50px !important;
  }

  .el-scrollbar__view {
    width: 166px;
  }
}

.item-title {
  @include flex-row();

  &-string {
    width: 72px;
  }

  .count {
    /*background-color: #F56C6C;*/
    height: 44px;
    line-height: 44px;
    color: $--color-primary;
    font-size: 14px;
    font-weight: 600;
    margin: 0 10px 0 0;
    /*padding: 0 5px;*/
    /*border-radius: 10px;*/

  }

  .countClass {
    background: red;
    display: inline-block;
    border-radius: 30px;
    height: 19px;
    line-height: 19px;
    /*margin-top: 10px;*/
    padding: 0px 5px;
    color: #fff;
    font-style: normal;
    /*position: absolute;*/
    /*right: 1rem;*/
    margin-left: 3px;
  }
}


</style>
